<template>
	<!--pages/TurnTable/TurnTable.wxml-->
	<view class="main">
		<image src="http://localhost/Public/Turntable/img/title.png" class="title-img"></image>
		<view class="turntable-box">
			<image src="http://localhost/Public/Turntable/img/turntable-bg.png" class="turntable-bg"></image>
			<image @tap="LuckyDraw" src="http://localhost/Public/Turntable/img/Luckydraw.png" class="Luckydraw"></image>
			<view class="turntable"
				:style="'transform: rotate(' + rotate + ');animation:' + ( Luckydrawing?'load .5s linear 6;':'')">
				<view class="circle" :style="'transform:rotate(' + item.rotate + ')skew(' + skew + ')'"
					v-for="(item, index) in TurntableArr" :key="index">
				</view>
				<view class="circle"
					:style="'background-color: rgba(0,0,0,0);transform:rotate(' + item.item_rotate + ')'"
					v-for="(item, index) in TurntableArr" :key="index">
					<view class="circle-award circle-award-trans">{{item.prize_name}}
						<image :src="item.img" class="award-ico"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="myaward" @tap="openmyaward">我的奖品</view>
		<view class="Lottery_number" v-if="shownum">您有<text
				class="active-color">{{getTaskTurntable.user_num.use_num}}</text>次抽奖机会</view>
		<view class="activity_time-box">
			<view class="activity_time">活动时间 {{getTaskTurntable.starttime}}—{{getTaskTurntable.endtime}}</view>
		</view>
		<view class="activity_time-box" v-if="getTaskTurntable.task_type!=null">
			<image src="/static/images/turntable/head-img.png" class="head-img"></image>
			<view class="text">任务</view>
			<view class="test">
				<text>{{getTaskTurntable.test_text}}</text>
				<text>已完成<text class="active-color">{{getTaskTurntable.donenum}}</text>次</text>
			</view>
		</view>
		<view class="activity_time-box">
			<image src="/static/images/turntable/head-img.png" class="head-img"></image>
			<view class="text">活动说明</view>
			<view class="instructions">{{getTaskTurntable.explain}}</view>
		</view>
		<view class="activity_time-box">
			<image src="/static/images/turntable/head-img.png" class="head-img"></image>
			<view class="text">活动规则</view>
			<view class="instructions instructions-height">
				<view class="display-flex">
					<view class="bottomtext">活动规则：</view>
					<view>{{getTaskTurntable.strategy}}</view>
				</view>
				<view class="display-flex">
					<view class="bottomtext">奖品说明：</view>
					<view class="display-column"> <text v-if="Turntable.type==2||Turntable.type==1"
							v-for="(Turntable, index) in getTaskTurntable.prize_list"
							:key="index">{{Turntable.prize_name}}{{Turntable.prize_num}}个</text></view>
				</view>
				<view class="private-text">本次活动最终解释权归xxx所有</view>
			</view>
		</view>
		<!-- 我的奖品弹窗 -->
		<view class="myaward-box" v-if="isShow" catchtouchmove="true">
			<view class="myaward-bg" v-if="!isOpen">
				<image src="/static/images/turntable/close.png" @tap="closepopup" class="close-ico"></image>-->
				<!-- 我的奖品信息 -->
				<view class="awardlist-box">
					<view class="award-title">我的奖品</view>
					<scroll-view class="awardlist" scroll-y lower-threshold="3" @scrolltolower="loadmore">
						<view class="award_item award-item-relative" v-for="(award, index) in AwardArr" :key="index">
							<image src="/static/images/turntable/award-bg.png" class="award_item award-item-absolute">
							</image>
							<image src="/static/images/turntable/myaward-ico.png" class="award_ico"></image>
							<view class="award_info_box">
								<view class="award_info">
									<view>{{award.prize_name}}</view>
									<view class="award-addtime">{{award.add_time}}</view>
								</view>
								<view class="award_btn" @tap="clickbtn" :data-index="index" :data-name="award.btn"
									:style="'background: ' + (award.btn=='已发放'?'#EEEEEE':'linear-gradient(to right,#FF948A,#FF5C6D)') + ';'">
									{{award.btn}}</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<!-- 中奖信息 -->
			<view class="winning-pop" v-if="isOpen">
				<image src="/static/images/turntable/myaward-ico.png" class="myaward-ico-image"></image>
				<view class="prize-title">
					<view class="poptext">恭喜您获得</view>
					<view class="prize-name-award">{{obtain_award.prize_name}}</view>
					<view class="poptext">{{obtain_award.award_type}}</view>
				</view>
				<view class="pop-btn" @tap="closepopup">确认</view>
			</view>
		</view>
	</view>
</template>

<script>
	// pages/TurnTable/TurnTable.js
	var app = getApp().globalData;

	export default {
		data() {
			return {
				TurntableArr: [],
				skew: '',
				rotate: '',
				isShow: false,
				isOpen: false,
				Luckydrawing: false,
				AwardArr: [],
				currentpage: 1,
				totlepages: 0,
				getTaskTurntable: {},
				obtain_award: {},
				shownum: false,
				order_id: ''
			};
		},

		components: {},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		async onLoad(options) {
			// #ifdef MP-ALIPAY
			if (JSON.stringify(options) == '{}') {
				options = my.getLaunchOptionsSync().query;
			}
			// #endif
			await this.$onLaunched;
			if (options.order_id == null) {
				var shownum = true;
				var order_id = '';
			} else {
				var shownum = false;
				var order_id = options.order_id;
			}

			this.setData({
				shownum: shownum,
				order_id: order_id
			});

			if (options.turntable_id == null) {
				getApp().globalData.sendRequest({
					url: '/Turntable/getTaskTurntable',
					type: "post",
					success: res => {
						if (res.code == 0) {
							var getTaskTurntable = res.data;
							getTaskTurntable.prize_list.forEach(data => {
								switch (data.type) {
									case '1':
										data.img = data.prize_img;
										break;

									case '2':
										data.img = data.prize_img;
										break;

									case '3':
										data.img = "/static/images/turntable/integral@2x.png";
										break;

									case '4':
										data.img = "/static/images/turntable/redpage.png";
										break;

									case '5':
										data.img = "/static/images/turntable/thanks.png";
										break;
								}
							});
							getTaskTurntable.starttime = getApp().globalData.getDate('y-m-d',
								getTaskTurntable.start_time * 1000);
							getTaskTurntable.endtime = getApp().globalData.getDate('y-m-d',
								getTaskTurntable.end_time * 1000);
							this.TurntableArr = getTaskTurntable.prize_list;
							var length = 360 / this.TurntableArr.length;
							this.TurntableArr.forEach((res, i) => {
								res.rotate = length * i + 'deg';
								res.item_rotate = length * i + (length - 90) / 2 + 'deg';
							});

							if (this.TurntableArr.length == 4) {
								this.rotate = 45 + 'deg';
							} else if (this.TurntableArr.length == 8) {
								this.rotate = 22.5 + 'deg';
							} else {
								this.rotate = 0;
							}

							if (getTaskTurntable.task_type == 1) {
								getTaskTurntable.test_text = '消费满' + getTaskTurntable.one_consume + '赠送一次';
							} else {
								getTaskTurntable.test_text = '消费满' + getTaskTurntable.one_consume + '累计' +
									getTaskTurntable.one_month_num + '次赠送一次';
							}

							if (getTaskTurntable.user_num != null) {
								getTaskTurntable.donenum = parseInt(getTaskTurntable.user_num.num) +
									parseInt(getTaskTurntable.user_num.use_num);
							} else {
								getTaskTurntable.donenum = 0;
							}

							this.setData({
								skew: 90 - length + 'deg',
								TurntableArr: this.TurntableArr,
								rotate: this.rotate,
								getTaskTurntable: getTaskTurntable
							});
						}
					}
				});
			} else {
				getApp().globalData.sendRequest({
					url: '/Turntable/getTurntableInfo',
					type: "post",
					data: {
						turntable_id: options.turntable_id
					},
					success: res => {
						if (res.code == 0) {
							var getTaskTurntable = res.data;
							getTaskTurntable.prize_list.forEach(data => {
								switch (data.type) {
									case '1':
										data.img = data.prize_img;
										break;

									case '2':
										data.img = data.prize_img;
										break;

									case '3':
										data.img = "/static/images/turntable/integral@2x.png";
										break;

									case '4':
										data.img = "/static/images/turntable/redpage.png";
										break;

									case '5':
										data.img = "/static/images/turntable/thanks.png";
										break;
								}
							});
							getTaskTurntable.starttime = getApp().globalData.getDate('y-m-d',
								getTaskTurntable.start_time * 1000);
							getTaskTurntable.endtime = getApp().globalData.getDate('y-m-d',
								getTaskTurntable.end_time * 1000);
							this.TurntableArr = getTaskTurntable.prize_list;
							var length = 360 / this.TurntableArr.length;
							this.TurntableArr.forEach((res, i) => {
								res.rotate = length * i + 'deg';
								res.item_rotate = length * i + (length - 90) / 2 + 'deg';
							});

							if (this.TurntableArr.length == 4) {
								this.rotate = 45 + 'deg';
							} else if (this.TurntableArr.length == 8) {
								this.rotate = 22.5 + 'deg';
							} else {
								this.rotate = 0;
							}

							this.setData({
								skew: 90 - length + 'deg',
								TurntableArr: this.TurntableArr,
								rotate: this.rotate,
								getTaskTurntable: getTaskTurntable
							});
						}
					}
				});
			}
		},

		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady() {},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {},

		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},

		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			openmyaward() {
				if (this.Luckydrawing) {
					return;
				}

				this.refresh();
			},

			closepopup() {
				this.setData({
					isShow: false,
					isOpen: false
				});
			},

			// 抽奖
			LuckyDraw() {
				if (this.Luckydrawing) {
					return false;
				} else {
					if (this.getTaskTurntable.user_num.use_num == 0) {
						uni.showToast({
							title: "次数用完啦~",
							icon: "none"
						});
					} else {
						this.getTaskTurntable.user_num.use_num--;
						getApp().globalData.sendRequest({
							url: '/Turntable/getRunTurntable',
							type: "post",
							data: {
								turntable_id: this.getTaskTurntable.id,
								bill_order_id: this.order_id
							},
							success: res => {
								if (res.code == 0) {
									var obtain_award = res.data;

									switch (obtain_award.type) {
										case '1':
											obtain_award.award_type = '实物';
											break;

										case '2':
											obtain_award.award_type = '门店商品';
											break;

										case '3':
											obtain_award.award_type = this.$store.integral_name;
											break;

										case '4':
											obtain_award.award_type = '余额';
											break;

										case '5':
											obtain_award.award_type = '谢谢惠顾';
											break;
									}

									this.setData({
										obtain_award: obtain_award,
										Luckydrawing: true,
										getTaskTurntable: this.getTaskTurntable
									});
									setTimeout(() => {
										this.setData({
											Luckydrawing: false,
											isShow: true,
											isOpen: true
										});
									}, 3100);
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none',
										duration: 1500
									});
								}
							}
						});
					}
				}
			},

			// 我的奖品
			refresh() {
				getApp().globalData.sendRequest({
					url: '/Turntable/TurntableMyPrize',
					type: "post",
					data: {
						turntable_id: this.getTaskTurntable.id,
						page: this.currentpage,
						page_size: 10
					},
					success: res => {
						if (res.code == 0) {
							this.AwardArr = this.AwardArr.concat(res.data.data);

							for (var i = 0; i < this.AwardArr.length; i++) {
								for (var j = i + 1; j < this.AwardArr.length; j++) {
									if (this.AwardArr[i].id == this.AwardArr[j].id) {
										this.AwardArr.splice(j, 1);
										j--;
									}
								}
							}

							res.data.data.forEach(res => {
								switch (res.type) {
									case '1':
										if (res.status == 1) {
											res.btn = '领取';
										} else {
											res.btn = '查看详情';
										}

										;
										break;

									case '2':
										if (res.status == 1) {
											res.btn = '领取';
										} else {
											res.btn = '查看详情';
										}

										;
										break;

									case '3':
										res.btn = '已发放';
										break;

									case '4':
										res.btn = '已发放';
										break;

									case '5':
										res.btn = '已发放';
										break;
								}
							});
							var totlepages = '';

							if (res.data.page_info.data_total % 10 == 0) {
								totlepages = res.data.page_info.data_total / 10;
							} else {
								totlepages = parseInt(res.data.page_info.data_total) / 10 + 1;
							}

							this.setData({
								AwardArr: this.AwardArr,
								totlepages: parseInt(totlepages),
								isShow: true
							});
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 1500
							});
						}
					}
				});
			},

			// 滚动组件触底加载更多
			loadmore() {
				var currentpage = this.currentpage + 1;

				if (currentpage > this.totlepages) {
					uni.showToast({
						title: '暂无更多',
						duration: 1500,
						icon: 'none'
					});
					return false;
				} else {
					this.setData({
						currentpage: currentpage
					});
					this.refresh();
				}
			},

			clickbtn(e) {
				var name = e.currentTarget.dataset.name;
				var index = e.currentTarget.dataset.index;

				switch (name) {
					case '已发放':
						uni.showToast({
							title: '该奖品已发放',
							icon: 'none',
							duration: 1500
						});
						return false;
						break;

					case '领取':
						uni.navigateTo({
							url: '../../order/Information/Information?id=' + this.AwardArr[index].id +
								'&prize_id=' + this.AwardArr[index].prize_id
						});
						break;

					case '查看详情':
						uni.navigateTo({
							url: '../../order/OrderDetail/OrderDetail?id=' + this.AwardArr[index].id +
								'&delivery_type=' + this.AwardArr[index].delivery_type
						});
						break;
				}
			}

		}
	};
</script>
<style>
	@import "./TurnTable.css";
</style>
